<script setup>

import {reactive, ref} from "vue";
import { ElMessage ,ElMessageBox} from 'element-plus'
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import {contestApi} from "@/api/contest.js";
import {facultyApi} from "@/api/faculty.js";
import {researchersApi} from "@/api/researchers.js";
const contestQuery = reactive({
  page:1,
  size:10,
  /*startDate:'',
  endDate:''*/
})
//load data 加载表格数据
const list = ref([])
const total = ref(0)
const loadData = ()=> {
  contestApi.list(contestQuery).then(result=>{
    console.log(contestQuery.page)
    if (result.code == 0){
      list.value = result.data
      total.value = result.count
    }
  })
}
loadData()

//状态滑块
const handleSwitchChange = () =>{

}
//搜索功能
const onSubmit = () =>{
  contestApi.selectByPage(contestQuery).then(result=>{
    if (result.code == 0){
      list.value = result.data
      total.value = result.count
      contestQuery.page = 1
    }
  })
}
//loadData()
//在页面加载时调用contestList()
const contests = ref([])
const contestList = () => {
  contestApi.list().then(result => {
    console.log(result.data)
    if (result.code == 0){
      contests.value = result.data
    }
  })
}
contestList()
//单个删除
const deleteDialog = ref(false)
const currentId = ref()
const deleteOneDialog = (id) =>{
  deleteDialog.value = true
  currentId.value = id
}
const deleteOne = (id) =>{
  contestApi.deleteOne(id).then(result=>{
    if (result.code==0){
      ElMessage.success("删除成功")
    }
    else {
      ElMessage.error("删除失败")
    }
    deleteDialog.value = false
    loadData()
  })
}
//批量删除
//1.Define an "ids" to store the IDs of the variables to be deleted.
const ids = ref([])
const currentIds = ref([])
const deleteAllDialog = ref(false)
//2.把复选框中选中的id的值传递给ids.value
function handSelectionChange(val){
  ids.value = val.map(item => item.id);
  console.log(ids.value)
}
//3.ok ids.value 已经有我想要的值了,现在把值传递给对话框吧
const openDeleteAllDialog = () => {
  currentIds.value = ids.value;
  deleteAllDialog.value = true
}
//4.执行删除方法deleteAll
const deleteAll = () => {
  contestApi.deleteAll(ids.value).then(result => {
    if (result.code == 0){
      ElMessage.success("delete success")
    }else {
      ElMessage.error("oops, something wrong")
    }
    deleteAllDialog.value = false;
    ids.value = []
    loadData()
  })
}
//添加 or 编辑
const openAddUpdateDialog = ref(false)
const contest = ref({

})
//add
const researchers = ref([])
const researchersList = () => {
  researchersApi.list().then(result=>{
    if (result.code == 0){
      researchers.value = result.data
    }
  })
}
researchersList()
const showAddDialog = () => {
  openAddUpdateDialog.value = true
  contest.value = {}

}
const showUpdateDialog = (id) => {
  openAddUpdateDialog.value = true;
  contest.value = {};
  contestApi.getById(id).then(result => {

    contest.value = result.data
    console.log(result.data)
  })
  //contest.value.displayResearchers = row.researchers; // 显示研究人员名字
};
const updateOrAdd = () =>{
  if (contest.value.id!==null && contest.value.id!=undefined){
    contestApi.update(contest.value).then(result=>{
      if (result.code == 0){
        ElMessage.success("更新成功")
        openAddUpdateDialog.value = false
        loadData()
      }else {
        ElMessage.error("oops, something wrong")
      }
    })
  }
  contestApi.add(contest.value).then(result => {
    if (result.code == 0){
      ElMessage.success("添加成功")
      openAddUpdateDialog.value = false
      loadData()
    }else {
      ElMessage.error("oops, something wrong")
    }
  })


}


//查询学院
const facultys = ref([])
const facultyList = () => {
  facultyApi.list().then(result => {
    if (result.code == 0){
      facultys.value = result.data
      console.log(facultys.value)
    }
  })
}
facultyList()
</script>

<template>
  <el-card>
    <template #header>
      <el-button type="primary" @click="showAddDialog" plain >添加</el-button>
      <el-button type="primary" v-model="ids" @click="openDeleteAllDialog(ids.value)" plain>批量删除</el-button>
    </template>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="contestQuery" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="contestQuery.name" placeholder="项目名称" clearable />
      </el-form-item>
      <el-form-item label="选择竞赛">
        <el-select
            v-model="contestQuery.contest"
            placeholder="请选择竞赛"
            clearable
        >
          <el-option
              v-for="contest in contests"
              :key="contest.id"
              :label="contest.name"
              :value="contest.id" />

        </el-select>
      </el-form-item>
      <el-form-item label="报名时间" style="margin-right: 10px;">
        <el-date-picker
            v-model="contestQuery.declarationDate"
            type="date"
            placeholder="请选择日期"
            clearabl
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>
    <!--  表格-->
    <el-table :data="list" style="width: 100%" @selection-change="handSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="ID" width="120"/>
      <el-table-column prop="name" label="竞赛名称"/>
      <el-table-column prop="startDate" label="开始时间"/>
      <el-table-column prop="endDate" label="结束时间"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="organizer" label="组织者"/>
      <el-table-column fixed="right" label="Operations" min-width="80">
        <template #default="{row}">
          <el-button type="danger" :icon="Delete" circle @click="deleteOneDialog(row.id)" />
          <el-button type="primary" :icon="Edit" circle @click="showUpdateDialog(row.id)"/>
        </template>
      </el-table-column>
    </el-table>
   <div class="demo-pagination-block" style="margin-top: 20px">

      <el-pagination
          v-model:current-page="contestQuery.page"
          v-model:page-size="contestQuery.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes,  pager, jumper"
          :total="total"
          @current-change="loadData"
      />
    </div>

    <!-- delete -->
    <el-dialog
        v-model="deleteDialog"
        title="Warning"
        width="500"
        align-center
    >
      <span>你确定要删除 ID 为 {{ ids.value }} 的记录吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialog = false">Cancel</el-button>
          <el-button type="primary" @click="deleteOne">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 批量删除 -->
    <el-dialog
        v-model="deleteAllDialog"
        title="Warning"
        width="500"
        align-center
    >
      <span>你确定要删除 ID 为 {{ currentIds }} 的记录吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteAllDialog = false">Cancel</el-button>
          <el-button type="primary" @click="deleteAll(currentIds)">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>

  <!-- 添加和编辑弹出框 -->
  <el-dialog v-model="openAddUpdateDialog" title="发布竞赛" width="500">
    <el-form :model="contest">
      <el-form-item label="竞赛名称" >
        <el-input v-model="contest.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="竞赛描述" >
        <el-input v-model="contest.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="组织机构" >
        <el-input v-model="contest.organizer" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="openAddUpdateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="updateOrAdd">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>